<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // window.onload = function () {
        //     var btn1 = document.querySelector(".btn1");
        //     console.log(btn1);
        //     btn1.onclick = function () {
        //         console.log(111);
        //     }
        // }
        // window.addEventListener("load", function () {
        //     var btn1 = document.querySelector(".btn1");
        //     console.log(btn1);
        //     btn1.onclick = function () {
        //         console.log(111);
        //     }
        // })


    </script>
</head>

<body>
    <button class="btn1">点击1</button>
    <button class="btn2">点击2</button>
    <script>
        // window.addEventListener("load",function(){
        //     console.log(2222);
        // })
        // window.onload = function(){
        //     console.log(222);
        // }

        // 一、on方式绑定事件
        // var btn1 = document.querySelector(".btn1");

        // // on+事件名称  绑定事件的时候 后一个会覆盖前面一个 。
        // btn1.onclick = function(){
        //     console.log(1111);
        // }

        // btn1.onclick = function(){
        //     console.log(222);
        // }

        // 二、通过 addEventListener 绑定事件
        // addEventListerner 可以绑定多个事件
        // var btn2 = document.querySelector(".btn2");
        // btn2.addEventListener("click",function(){
        //     console.log(1111);
        // })

        // btn2.addEventListener("click",function(){
        //     console.log(2222);
        // })

        // btn2.addEventListener("click",function(){
        //     console.log(33333);
        // })


        /* 
            总结 ：
                dom 0级事件绑定 多个事件的时候 后一个事件会覆盖前一个事件
                dom 2级事件绑定 多个事件都会执行
        */
    </script>
</body>

</html>